<script setup>
import { computed, ref } from 'vue'
import useLoginStore from '@/store/user/index.js'
import { useRoute } from 'vue-router'
import { breadPathName } from '@/utils/addRoute.js'
import router from '@/router/index.js'
import { removeLocalStore } from '@/utils/localUser.js'
import { MENUS, TOKEN, USERINFO } from '@/utils/const.js'

//定义折叠导航栏时间
const $emits = defineEmits(['foldSide'])
//折叠图标切换
const isFold = ref(true)
const isFoldBtn = () => {
  isFold.value = !isFold.value
  $emits('foldSide', isFold.value)
}

//面包屑
const route = useRoute()
const loginStore = useLoginStore()
const pathName = computed(() => breadPathName(route.path, loginStore.menus))

//个人中心展示
const changePersonBtn = () => {
  router.push('/main/person')
}

//退出登录
const loginOut = async () => {
  await loginStore.loginOutAction()
  //移除本地存储的基本信息
  removeLocalStore(TOKEN)
  removeLocalStore(MENUS)
  removeLocalStore(USERINFO)
  //跳转到登录页面
  await router.push('/login')
}
</script>

<template>
  <div class="top-bar">
    <div class="left">
      <el-icon size="25px">
        <component :is="isFold ? 'Expand' : 'Fold'" @click="isFoldBtn"></component>
      </el-icon>
      <el-breadcrumb separator-icon="ArrowRight">
        <template v-for="(item, index) in pathName" :key="index">
          <el-breadcrumb-item :to="item.path">{{ item.name }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>
    <div class="right">
      <img src="../../../assets/images/login.png" alt="#" />
      <el-dropdown>
        <span class="el-dropdown-link">
          catyyds
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="changePersonBtn">个人中心</el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped lang="less">
.top-bar {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    .el-icon {
      margin-right: 40px;
    }

    display: flex;
    align-items: center;
  }

  .right {
    display: flex;
    align-items: center;
    margin-right: 20px;

    img {
      margin-right: 5px;
      width: 40px;
      height: 40px;
    }
  }
}
</style>
